<template>
  <div class="dataAllContainer">
    <div class="leftContainer">
      <div class="title">筛选器</div>
      <div
        id="main"
        style="height: calc(100vh - 100px); width: 500px; overflow-y: scroll"
      >
        <el-tree
          :data="data"
          highlight-current
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
    </div>
    <div class="centerContainer"></div>
    <div class="rightContainer">
      <div class="title">救援舱状态与修改</div>
      <div id="main">
        <el-table
          :data="tableData"
          height="calc(100vh - 115px)"
          border
          style="width: 100%"
        >
          <el-table-column label="序列号" type="index" width="110">
          </el-table-column>
          <el-table-column
            prop="actionNo"
            show-overflow-tooltip
            label="型号"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            show-overflow-tooltip
            label="状态"
            width="180"
          >
            <template slot-scope="scope">
              {{ status[scope.row.status - 1] }}
            </template>
          </el-table-column>
          <el-table-column prop="address" show-overflow-tooltip label="地址">
          </el-table-column>
          <el-table-column
            prop="heaterStatus"
            show-overflow-tooltip
            label="加热器"
            width="180"
          >
            <template slot-scope="scope">
              <el-switch
                @change="(val) => update(scope.row, 'heaterStatus', val)"
                :value="scope.row.heaterStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="airStatus"
            show-overflow-tooltip
            label="空气净化器"
            width="180"
          >
            <template slot-scope="scope">
              <el-switch
                @change="(val) => update(scope.row, 'airStatus', val)"
                :value="scope.row.airStatus"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="lightingType"
            show-overflow-tooltip
            label="灯光"
            width="180"
          >
            <template slot-scope="scope">
              <el-switch
                @change="(val) => update(scope.row, 'lightingType', val)"
                :value="scope.row.lightingType"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { addressList, deviceLists, updateDevice } from "@/api/index.js";
export default {
  name: "DataAll",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [],
      status: ["正常运行", "使用中", "故障中", "异常中"],
    };
  },
  props: {
    prop: {
      type: String,
      required: false,
    },
  },
  components: {},
  computed: {},
  watch: {},
  methods: {
    update(row, prop, val) {
      console.log("al:", val);
      row[prop] = val;
      updateDevice(row).then(() => {
        this.$message.success("修改成功!");
        this.getDevice(0);
      });
    },
    getDevice(data) {
      deviceLists(data).then((res) => {
        this.tableData = res;
      });
    },
    handleNodeClick(data) {
      console.log(data);
      this.getDevice(data.id);
    },
    getList() {
      addressList({}).then((res) => {
        this.data = res;
      });
    },
  },
  created() {},
  mounted() {
    this.getList();
    this.getDevice(0);
  },
  updated() {},
  destroyed() {},
  filters: {},
};
</script>

<style scoped lang="scss">
.dataAllContainer {
  display: flex;
  .title {
    color: #fff;
    text-align: center;
  }
  #main {
    border: 2px solid #003a78;
    border-radius: 5px;
    padding: 5px;
    background-color: #fff;
  }
  .leftContainer {
    width: 500px;
    margin-right: 10px;
    margin-left: 5px;
  }
  .rightContainer {
    width: calc(100vw - 520px);
  }
}
</style>
